<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-22 11:06:08
 * @LastEditTime: 2020-02-28 21:57:15
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>Hello APP</title>
		<link rel="stylesheet" type="text/css" href="../css/vant.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../css/local.css" />
		<script type="text/javascript" src="../script/jquery.js"></script>
		<script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script src="../script/vant.min.js"></script>
		<script type="text/javascript" src="../script/fastclick.js"></script>
		<script type="text/javascript" src="../script/base.js"></script>
		<style type="text/css">
			.img .van-cell__value {
				text-align: right;
			}

			.user-img {
				width: 50px;
				height: 50px;
				border-radius: 25px;
				overflow: hidden;
				display: inline-block;
			}

			.user-img img {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="init-full">
				<van-nav-bar class="head" title="个人信息" left-arrow @click-left="onClickLeft">
				</van-nav-bar>
				<div class="body-no-bottom">
					<div class="content">
						<van-cell-group>
							<van-cell class="img" @click="chooseImg">
								<div slot="title" style="line-height: 50px;">用户头像</div>
								<div class="user-img">
									<img
										:src="userInfo.Picture?(shoppingMallServerIP + userInfo.Picture):'../image/header.png'" />
								</div>
							</van-cell>
							<van-field label="真实姓名" v-model="userInfo.RealName" placeholder="请输入真实姓名"></van-field>
							<van-cell title="性别" :value="userInfo.Gender==1?'男':(userInfo.Gender==2?'女':'')" is-link
								@click="showGenders = true;">
							</van-cell>
							<van-field label="昵称" v-model="userInfo.NickName" placeholder="请输入昵称"></van-field>
							<van-field label="邮箱" v-model="userInfo.Email" placeholder="请输入邮箱"></van-field>
							<van-cell title="生日" :value="userInfo.BirthDate?userInfo.BirthDate.split('T')[0]:''"
								@click="openDate" is-link @click="openDate">
							</van-cell>
							<van-field label="QQ" v-model="userInfo.QQ" placeholder="请输入QQ"></van-field>

						</van-cell-group>
						<div class="btn-padding">
							<van-button :disabled="ifConfirm" :loading="ifConfirm" loading-text="数据提交中..."
								type="primary" block @click="onSave">保存</van-button>
						</div>

					</div>
					<van-loading v-if="showLoading" />
				</div>
			</div>

			<van-action-sheet v-model="showGenders" :actions="genders" description="性别选择" @cancel="showGenders = false;"
				@select="genderSelect"></van-action-sheet>

			<van-popup v-model="showDate" round position="bottom">
				<van-datetime-picker v-model="currentDate" type="date" @confirm="confirmDate" @cancel="cancelDate"
					cancel-button-text="清空" />
			</van-popup>

		</div>
	</body>

	<!-- 调用 uniapp webview 的 api ，记得需要写在 body 标签下面 -->
	<script src="../../../assets/script/uni.webview.1.5.4.js"></script>
	<script type="text/javascript">
		var vm; 
			//$('.init-full').show(); 

			vm = new Vue({
				el: '#app',
				data: {
					showLoading: false,
					ifConfirm: false,
					showGenders: false,
					showDate: false,
					currentDate: new Date(),
					genders: [{
						name: '男'
					}, {
						name: '女'
					}],
					shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
					userInfo: FLD.getUserInfo()
				},
				created: function() {
					var that = this;

				},
				methods: {
					chooseImg() {
						var that = this;
						return vant.Toast('暂不支持修改头像')
						UIAlbumBrowser.imagePicker({
							max: 1,
							styles: {
								nav: {
									bg: '#efefef',
									cancelColor: '#000',
									nextStepColor: '#000',
									finishText: '完成'
								}
							},
							rotation: true
						}, function(ret) {
							if (ret) {
								if (ret.originalPath) {
									// UIAlbumBrowser.closePicker();
									UIAlbumBrowser.transPath({
										path: ret.assetPath || ret.originalPath
									}, function(ret, err) {
										if (ret) {

											FLD.uploadFile_shop(ret.path, function(path) {
												that.userInfo.Picture = path;
												that.saveImg();
											})
										}
									});
								} else if (ret.eventType == 'nextStep') {
									UIAlbumBrowser.closePicker();
									var imgLists = ret.list;
									var repeatImg = function(i) {
										if (i == imgLists.length) {
											return;
										}
										UIAlbumBrowser.transPath({
											path: imgLists[i].path
										}, function(ret, err) {
											if (ret) {
												FLD.uploadFile_shop(ret.path, function(path) {
													that.userInfo.Picture = path;
													that.saveImg();
												})

											}
										});
									}
									repeatImg(0)

								}

							}
						});
					},
					saveImg() {
						var that = this;
						FLD.ajax('sp_updateMemberPic', {
							picture: that.userInfo.Picture
						}, function(res) {
							var u = FLD.getUserInfo();
							u.Picture = that.userInfo.Picture;
							window.localStorage.setItem('userInfo', JSON.stringify(u));
							api.sendEvent({
								name: 'refreshAboutUser'
							});
						})
					},
					openDate() {
						this.currentDate = new Date()
						this.showDate = true;
					},
					confirmDate(value) {
						this.userInfo.BirthDate = FLD.getFormatDate(value).split(' ')[0]
						this.showDate = false;
					},
					cancelDate(value) {
						this.userInfo.BirthDate = '';
						this.showDate = false;
					},
					genderSelect(item, index) {
						var that = this;
						that.showGenders = false;
						that.userInfo.Gender = index + 1;

					},
					onSave() {
						var that = this;
						that.ifConfirm = true;
						var obj = {
							realName: that.userInfo.RealName || '',
							gender: that.userInfo.Gender || 0,
							nickName: that.userInfo.NickName || '',
							email: that.userInfo.Email || '',
							birthdate: that.userInfo.BirthDate || '1900-01-01',
							QQ: that.userInfo.QQ || ''
						}
						FLD.ajax('sp_updateUserInfo', obj, function(res) {
							that.ifConfirm = false;
							window.localStorage.setItem('userInfo', JSON.stringify(that.userInfo));
							
							layer.open({
								content: '个人信息修改成功!',
								skin: 'msg',
								time: 2
							});
						})
					},
					onClickLeft() {
						uni.navigateBack()
					}
				}
			})
	 
	</script>

</html>